<template>
	<div class="thePage flex-column overflow-y">
		<div class="pg-title-dark">学生评价</div>

		<div class="item-box">
			<div class="flex-between">
				<div class="item-left flex-column flex-center ">
					<img class="avatar" :src="item.avatar || defaultAvatar" />
					<div>{{ item.name }}</div>
					<div>{{ item.number }}</div>
				</div>
				<div class="item-right flex-column flex-1">
					<div>{{ item.college + item.class }}</div>
					<div>岗位：{{ item.post }}</div>
					<div class="entTel">
						联系电话：{{ item.entTel }}
						<i class="iconfont icon-dianhua"></i>
					</div>
					<div>实习开始时间：{{ item.dtBegin }}</div>
					<div>实习结束时间：{{ item.dtEnd }}</div>
				</div>
			</div>
		</div>

		<div class="remarkLabel">填写评价：</div>
		<cube-textarea class="content flex-1" v-model="item.remark" autoExpand></cube-textarea>

		<div class="btn-confirm " @click="onSubmit">发布</div>

		<!-- 弹窗 -->
		<dialog-confirm :visible="visiblePopup" btnText="返回" content="已保存发布" :onConfirm="handleConfirm"></dialog-confirm>
	</div>
</template>

<script>
import DialogConfirm from '@/components/DialogConfirm.vue';

export default {
	name: 'FeedbackEdit',
	components: {
		DialogConfirm
	},
	data() {
		return {
			defaultAvatar: require('@/pics/default_avatar.png'),
			item: {
				name: '王某1',
				number: '2018080101',
				avatar: '',
				college: '信息学院',
				class: '18数媒四',
				post: 'ui设计师',
				entTel: '15158900366',
				dtBegin: '2020.07.01',
				dtEnd: '2020.12.31',
				remark: '该学生在我公司实习期间表现良好，无迟到早退现象，工作积极，认真。',
				status: '0' // 0未评价、1已评价
			},
			visiblePopup: false //提交确认弹窗显示
		};
	},

	methods: {
		onSubmit() {
			this.visiblePopup = true;
		},

		//处理弹框确认按钮回调
		handleConfirm() {
			this.visiblePopup = false;
			this.$router.push({ name: 'feedbackList' });
		}
	}
};
</script>

<style lang="less" scoped>
.item-box {
	margin: 0 30px;
	font-weight: 400;
	color: #3a3a3a;
	line-height: 24px;
}

.item-left {
	padding: 0 10px;
	font-size: 12px;
}
.item-right {
	padding: 0 10px;
	font-size: 12px;
}

.remarkLabel {
	margin: 50px 30px 20px 30px;
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	line-height: 12px;

	&::before {
		content: '*';
		margin-right: 0.3em;
		color: #fe921e; //#e64340;
		font-size: 20px;
		font-weight: 600;
	}
}
.content {
	margin: auto 30px;
}
.btn-confirm {
	margin: 20px auto;
}
</style>
